<template>
  <div class="main">
    <div class="m-radio" v-if="path.indexOf('/DjRadio/MoreView')">
      <div class="rditype">

        <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in list" :key="index">
              <ul class="z-show" v-if="item.categories">
                <li v-for="(child,i) in item.categories" :key="i">
                  <router-link :to="{name:'DjRadioView',query:{id:child.id}}" :class="indexId==child.id?'a-active':''">
                    <div class="icon" :class="indexId==child.id?'em-active':''" :style="`background-image: url(${child.picWebUrl})`"></div>
                    <em >{{child.name}}</em>
                  </router-link>
                </li>
              </ul>
              <ul class="z-show" v-if="item.other">
                <li v-for="(child,i) in item.other" :key="i">
                  <a href="#" class="">
                    <div class="icon " :style="`background-image: url(${child.icon})`"></div>
                    <em>{{child.name}}</em>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>

        </div>


      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import Swiper from "swiper";
import 'swiper/css/swiper.min.css'

export default {
  name: "index",
  data() {
    return {
      list: [
        {
          categories: [],
        },
        {
          other: [
            {
              icon: require('../../assets/icon-19.png'),
              name: '文学出版'
            },
            {
              icon: require('../../assets/icon-20.png'),
              name: '常见问题'
            },
            {
              icon: require('../../assets/icon-21.png'),
              name: '我要做主播'
            },
          ]
        }
      ],
      indexId:'',
      path:''
    }
  },
  methods: {
    async getCateList() {
      let result = await this.$API.reqCateList();
      this.list[0].categories = result.data.categories.slice(0, 18)
    }

  },
  mounted() {
    var swiper = new Swiper(".mySwiper", {
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
    this.getCateList()
    if (this.$route.query){
      this.indexId = this.$route.query.id
    }
    this.path = this.$route.path
  }
}
</script>

<style scoped lang="less">
.main {
  width: 980px;
  height: auto;
  padding: 0 0 40px 0;
  overflow: hidden;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;

  .m-radio {
    padding: 40px;

    .swiper {
      width: 100%;
      height: 100%;

      .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
        left: 235px;
        top: 230px;
        width: 20px;
        height: 30px;
        display: block;
        right: auto;
      }

      .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
        right: 235px;
        left: auto;
        top: 230px;
      }

      .swiper-button-prev, .swiper-button-next {
        --swiper-navigation-size: 20px;
        //修改按钮大小
      }

      .swiper-button-prev::after, .swiper-button-next::after {
        color: rgb(51, 51, 51);
        //修改按钮颜色
      }

      .swiper-wrapper {
        position: relative;
      }
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;

      .z-show {
        margin-left: -33px;
        height: 194px;
        width: 933px;

        li {
          float: left;
          margin: 0 0 25px 33px;

          .a-active {
            background-position: -70px 0;
            color: #d35757;
            background-image: url(../../assets/radio_bg.png);
            background-repeat: no-repeat;
          }

          a {
            display: block;
            width: 70px;
            height: 70px;
            background-position: 0 9999px;
            text-align: center;
            color: #888;

            .em-active {
              background-position: -48px 0 !important;
            }

            .icon {
              width: 48px;
              height: 48px;
              margin: 2px auto 0;
              background-position: 0 0;
             }

            em {
              display: block;
              font-size: 12px;
              font-style: normal;
              text-align: center;
              //font-size: inherit;
            }
          }

        }
      }
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .rditype {
      overflow: hidden;
      height: 194px;
      max-height: 194px;


    }
  }
}
</style>